<template>
  <div>
    <header id="header">
      <div class="head_top">
        <span class="jt"></span>
        <van-search v-model="value" placeholder="请输入搜索关键词" class="ip" />
      </div>
      <div class="head_bot">
        <van-dropdown-menu active-color="#ee0a24">
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "机票",
      value2: "出发地",
      value3: "",
      value4: "",
      option1: [
        { text: "机票", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 }
      ],
      option2: [
        { text: "出发地", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" }
      ],
      // option3: [
      //   { text: "综合排序", value: 0 },
      //   { text: "新款商品", value: 1 },
      //   { text: "活动商品", value: 2 }
      // ],
      // option4: [
      //   { text: "筛选", value: "a" },
      //   { text: "好评排序", value: "b" },
      //   { text: "销量排序", value: "c" }
      // ]
    };
  }
};
</script>
<style lang="scss" scoped>
#header {
  height: 0.9rem;
  line-height: 0.8rem;
  background-color: #19c48a;
  background-image: linear-gradient(90deg, #50c971, #0fbfa6);
  // display: flex;
  // justify-content: space-between;
  .head_top {
    height: 0.8rem;
    .jt {
      display: inline-block;
      width: 10%;
      height: 0.8rem;
      background: url()
        no-repeat;
      background-size: 100%;
      float: left;
    }
    .ip {
      width: 90%;
      height: 0.6rem;
      line-height: 0.6rem;
      background-color: hsla(0, 0%, 100%, 0.2);
      // background-color: transparent;
      border-radius: 0.6rem;
         float: left;
        margin-top: .1rem;
      input {
        background-color: #19c48a;
      }
    }
    .van-search__content {
      background-color: hsla(0, 0%, 100%, 0.2);
    }
  }
  .head_bot{
    height: .4rem;
  }
}
</style>